<template>
  <div class="container-big flexcolumn">
    <div class="content-big">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        class="flex aligncenter bg_fff p-10 fborderb"
      >
        <div v-if="repoType==1" class="flex aligncenter">
          <el-button v-hasPermi="['single:batchgroup:addtask']" type="primary" size="small" @click="handerAddTask">
            <i class="el-icon-plus mr-8"></i>新建任务
          </el-button>
          <div v-hasPermi="['single:batchgroup:set']"
            class="setbox bg_fff commhover ml-8 mr-8 flexcenter"
            @click="handleSet"
          >
            <i class="el-icon-setting c_primary f-16"></i>
          </div>
        </div>
        <el-form-item prop="name" class="mb-0">
          <el-input
            placeholder="搜任务"
            v-model="queryParams.name"
            @keyup.enter.native="handleQuery"
            class="x-input-select"
            style="width: 200px"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="account" class="mb-0">
          <el-select
            v-model="queryParams.account"
            placeholder="主账号"
            style="width: 200px"
            clearable
            filterable
            @change="handleQuery"
          >
            <el-option
              v-for="(item, index) in accountList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
      </el-form>
      <div class="flex content-wrapper">
        <div class="content-left">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="kw_tab">
            <el-tab-pane
              v-for="(item, index) in tabList"
              :key="index"
              :label="item.label"
              :name="item.value"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="listbox">
            <div v-if="dataList.length" class="p-12">
              <div
                v-for="(item, index) in dataList"
                :key="index"
                class="content-item bg_fff p-12 commhover br_4 mb-8"
                :class="{ active: rowItem && item.id == rowItem.id }"
                @click="handleItem(item)"
              >
                <div class="content-top flexbetween c_text2">
                  <div
                    class="iconbox flexcenter mr-12 bg_fff br_4"
                    :class="{ iconwarn: item.status == 2 }"
                  >
                    <img
                      v-if="item.status == 2"
                      src="@/assets/images/iconfile_warning.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="@/assets/images/iconfile_primay.png"
                      alt=""
                    />
                  </div>
                  <div class="ct_left">
                    <div class="flexbetween w_full">
                      <div class="title ct_textbox line_h_22">
                        {{ item.title || "--" }}
                      </div>
                      <div class="mgt f-14 flex justify-end">
                        <span v-if="item.status == 3" class="c_warning2 mr-12"
                          >等待中</span
                        >
                        <span
                          v-else-if="item.status == 4"
                          class="c_primary mr-12"
                          >已完成</span
                        >
                        <span v-else-if="item.status == 5" class="c_text3 mr-12"
                          >已取消</span
                        >
                        <el-tooltip
                          v-else
                          class="item"
                          effect="dark"
                          :content="item.status == 1 ? '暂停' : '开始'"
                          placement="top-start"
                        >
                          <img
                            v-if="item.status == 1"
                            src="@/assets/images/iconstart.png"
                            alt=""
                            class="mr-12"
                          />
                          <img
                            v-if="item.status == 2"
                            src="@/assets/images/iconpause.png"
                            alt=""
                            class="mr-12"
                          />
                        </el-tooltip>
                        <el-dropdown @command="handleCommand($event, item)">
                          <i class="el-icon-more pr-5 f-12"></i>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-hasPermi="['single:batchgroup:open']" command="a"
                              >开启</el-dropdown-item
                            >
                            <el-dropdown-item v-hasPermi="['single:batchgroup:close']" command="b"
                              >暂停</el-dropdown-item
                            >
                            <el-dropdown-item v-hasPermi="['single:batchgroup:cancel']" command="c"
                              >取消</el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                    <div class="flexbetween f-12 c_text3 mt-3">
                      <div class="textover">
                        下发企微号进度：
                        <span class="plr-6"> 1/3 </span>主账号创建
                      </div>
                      <div>2024-04-11 15:00</div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="item.status == 1 || item.status == 2"
                  class="flexbetween line_h_22 mt-4"
                >
                  <div class="footleft">
                    <el-progress
                      :percentage="50"
                      :status="item.status == 2 ? 'warning' : ''"
                      class="w_full"
                    ></el-progress>
                  </div>
                  <div class="ml-30 c_text3 f-12">1/3</div>
                </div>
              </div>
            </div>
            <div
              v-if="!dataList.length"
              class="h_full bg_fff flexcolumn aligncenter"
            >
              <!-- <div></div> -->
              <img
                src="@/assets/images/market_empty.png"
                alt=""
                class="nodataimg"
              />
              <span class="c_text4 mt-10">暂无任务，请先创建</span>
            </div>
          </div>
        </div>
        <div class="content-right bg_fff">
          <addOrEditUserOperations
            :key="datakey"
            :info="rowItem"
          ></addOrEditUserOperations>
        </div>
      </div>
    </div>
    <!-- 设置-->
    <editSendSettings
      v-if="showEditSendSettings"
      :visableIf.sync="showEditSendSettings"
    ></editSendSettings>
    <!-- 管理 -->
    <plan-manage v-if="openmanage" :visableIf.sync="openmanage" :row="mitem" />
  </div>
</template>

<script>
import { listUser, delUser } from "@/api/system/user";
import PlanManage from "@/views/communityOperation/components/PlanManage.vue";
import SelectPlan from "@/components/UserGroupComp/SelectPlan.vue";
export default {
  name: "newUserOperationsList",
  components: {
    editSendSettings: () => import("@/views/communityOperation/components/editSendSettings.vue"), //
    addOrEditUserOperations: () => import("./addOrEditUserOperations.vue"), //
    PlanManage, //方案管理
    SelectPlan, //批量应用
  },
  data() {
    return {
      accountList: [
        { label: "全部", value: "1" },
        { label: "员工1", value: "2" },
        { label: "员工2", value: "3" },
      ],
      activeName: "1",
      tabList: [
        { label: "全部", value: "1" },
        { label: "发送中", value: "2" },
        { label: "等待中", value: "3" },
        { label: "暂停中", value: "4" },
        { label: "已完成", value: "5" },
        { label: "已取消", value: "6" },
      ],
      showEditSendSettings: false,
      rowItem: null,
      datakey: "",
      dataList: [
        { id: 1, title: "方案一", status: 1 },
        { id: 2, title: "方案二", status: 2 },
        { id: 3, title: "方案二", status: 4 },
        { id: 4, title: "方案二", status: 3 },
      ],
      newPlan: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        id: null, //用户id
        userName1: null,
      },
      total: 8, // 表格的总条数
      openmanage: false, //方案管理
      mitem: null,
    };
  },
  props:{
    // 1 近两周记录 2 2周前记录
    repoType:{
      type:Number,
      default:1
    }
  },
  created() {},
  methods: {
    handleClick() {},

    handerAddTask() {
      this.$router.push({ name: "SinglegBatchGroupAdd" });
    },

    handleItem(item) {
      this.rowItem = item;
      this.datakey = Date.now();
    },

    handleSet() {
      this.showEditSendSettings = true;
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },

    handleManage(item) {
      this.mitem = item;
      this.openmanage = true;
    },

    handleCommand(type, item) {
      switch (type) {
        case "a":
          this.handleDelete(item);
          break;

        default:
          break;
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$msgBox
        .showMsgBox({
          title: "提示",
          content:
            "此处删除会同步删除已应用到各个企微号下的该入群欢迎语任务，请谨慎操作。",
        })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.container-big {
  height: calc(100vh - 48px);
}
.content-big {
  height: calc(100% - 62px);
  .setbox {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #3070ff;
  }
  .content-wrapper {
    height: calc(100% - 56px);
  }
  .content-left {
    width: 464px;
    height: 100%;

    .content-item {
      border: 1px solid #e9e9e9;
      &.active {
        border: 1px solid #3070ff;
        background: #ebf2ff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
      }
      .ct_left {
        width: calc(100% - 60px);
      }
      .iconbox {
        width: 48px;
        height: 48px;
        border: 1px solid #e9e9e9;
        &.iconwarn {
          background-color: #ffede3;
          border-color: #ffc7aa;
        }
      }
      .ct_textbox {
        width: calc(100% - 90px);
      }
      .mgt {
        width: 94px;
        // span {
        //   padding: 0 7px;
        //   margin-right: 5px;
        //   border-right: 1px solid #eee;
        // }
      }
    }
  }
  .content-right {
    flex: 1;
    border-left: 1px solid #e9e9e9;
    width: calc(100% - 464px);
  }
}
.listbox {
  height: calc(100% - 40px);
  overflow-y: auto;
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 6px;
    height: 100%;
    background-color: #fff;
    z-index: 9;
  }
}
.kw_tab {
  ::v-deep .el-tabs__header {
    background-color: #fff;
    margin: 0;
  }
  ::v-deep .el-tabs__nav-wrap {
    padding-left: 20px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e9e9e9;
  }
  ::v-deep .el-tabs__item {
    padding: 0 18px;
  }
}
.fborderb {
  height: 56px;
  border-bottom: 1px solid #e9e9e9;
}
.nodataimg {
  margin-top: 200px;
  height: 56px;
}
.footleft {
  width: 90%;
  ::v-deep .el-progress-bar {
    padding-left: 0;
  }
  ::v-deep .el-progress__text {
    display: none;
  }
}
</style>
